<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Image Reader (OCR)</title>
    <link type="text/css" rel="stylesheet" href="index.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body>
		<div class="toolbar" style="display: none;">
      <table>
        <tr>
          <td id="reload" title="Reload UI">
            <svg width="11" height="11" viewBox="0 0 512 512">
              <path d="M281.525,228.102l104.758-78.042 c12.082-12.085,12.082-24.259,0-36.342L281.525,35.674c-3.274-2.359-7.359-3.725-11.723-3.725c-10.992,0-19.803,8.536-19.803,19.083  v35.429C144.611,86.737,59.205,172.046,59.205,277.258c0,105.396,85.672,190.793,191.248,190.793 c98.03,0,178.809-73.498,189.977-168.169c0.092-0.275,0.367-3.187,0.367-4.455c0-9.992-8.181-18.169-18.261-18.169h-45.793 c-14.993,0-26.349,10.355-27.893,18.986c-8.811,46.156-49.519,80.954-98.397,80.954c-55.329,0-100.127-44.701-100.127-99.94 c0-55.064,44.523-99.667,99.674-99.941v35.437c0,10.541,8.811,19.076,19.803,19.076C274.166,231.83,278.251,230.471,281.525,228.102 z"/>
            </svg>
          </td>
        </tr>
        <tr>
          <td id="support" title="Open support page">
            <svg width="11" height="11" viewBox="0 0 1792 1792">
              <path d="M1088 1256v240q0 16-12 28t-28 12h-240q-16 0-28-12t-12-28v-240q0-16 12-28t28-12h240q16 0 28 12t12 28zm316-600q0 54-15.5 101t-35 76.5-55 59.5-57.5 43.5-61 35.5q-41 23-68.5 65t-27.5 67q0 17-12 32.5t-28 15.5h-240q-15 0-25.5-18.5t-10.5-37.5v-45q0-83 65-156.5t143-108.5q59-27 84-56t25-76q0-42-46.5-74t-107.5-32q-65 0-108 29-35 25-107 115-13 16-31 16-12 0-25-8l-164-125q-13-10-15.5-25t5.5-28q160-266 464-266 80 0 161 31t146 83 106 127.5 41 158.5z"/>
            </svg>
          </td>
        </tr>
        <tr>
          <td id="donation" title="Make a donation">
            <svg width="11" height="11" viewBox="-0.709 -11.555 141.732 141.732">
              <path d="M140.314,37.654C140.314,16.858,123.402,0,102.537,0c-13.744,0-25.77,7.317-32.379,18.255C63.549,7.317,51.521,0,37.777,0 C16.912,0,0,16.858,0,37.654c0,10.821,4.588,20.57,11.922,27.438h-0.01l54.084,51.584c0.992,1.188,2.48,1.945,4.148,1.945 c1.545,0,2.936-0.653,3.92-1.696l54.346-51.833h-0.016C135.729,58.225,140.314,48.476,140.314,37.654"/>
            </svg>
          </td>
        </tr>
        <tr>
          
        </tr>
      </table>
		</div>
    <div class="container">
      <div class="content">
        <div class="fileio">
          <div class="info">Choose or drop an image file here</div>
          <input id="choose" type="file" accept="image/*"></input>
        </div>
      </div>
      <div>
        <label for="data-select">选择数据:</label>
        <select id="data-select">
            <option value="">请选择</option>
            <!-- 这里将动态填充选项 -->
        </select>
    </div>
      <label id="img-element-label">预览图片</label>
      <img id="csrc" src="" style="max-width: 600px;"></img>
     
      
      <button id="output-images" style="margin: 10px;">获取质检图片</button>
       
      <div class="consent">
        <p>
          Note: this app uses: "github.com/naptha/tessdata/tree/gh-pages/"
          GitHub repo to fetch language data required for the OCR operation.
        </p>
        <button id="consent">Ok</button>
      </div>
      <div class="select" style="display: none;">
        <table>
          <tr>
            <td>
              <select id="accuracy">
                <option value='3.02'>Low (minimum OCR accuracy)</option>
                <option value='4.0.0'>Moderate (moderate OCR accuracy)</option>
                <option value='4.0.0_fast'>Fast (shorter OCR time)</option>
                <option value='4.0.0_best'>Best (best OCR accuracy)</option>
              </select>
            </td>
            <td>
              <select id="language">
                <option value='afr'>Afrikaans</option>
                <option value='ara'>Arabic</option>
                <option value='aze'>Azerbaijani</option>
                <option value='bel'>Belarusian</option>
                <option value='ben'>Bengali</option>
                <option value='bul'>Bulgarian</option>
                <option value='cat'>Catalan</option>
                <option value='ces'>Czech</option>
                <option value='chi_sim'>Chinese</option>
                <option value='chi_tra'>Traditional Chinese</option>
                <option value='chr'>Cherokee</option>
                <option value='dan'>Danish</option>
                <option value='deu'>German</option>
                <option value='ell'>Greek</option>
                <option value='eng'>English</option>
                <option value='enm'>English (Old)</option>
                <option value='meme'>Internet Meme</option>
                <option value='epo'>Esperanto</option>
                <option value='epo_alt'>Esperanto alternative </option>
                <option value='equ'>Math</option>
                <option value='est'>Estonian</option>
                <option value='eus'>Basque</option>
                <option value='fin'>Finnish</option>
                <option value='fra'>French</option>
                <option value='frk'>Frankish</option>
                <option value='frm'>French (Old)</option>
                <option value='glg'>Galician </option>
                <option value='grc'>Ancient Greek</option>
                <option value='heb'>Hebrew</option>
                <option value='hin'>Hindi</option>
                <option value='hrv'>Croatian</option>
                <option value='hun'>Hungarian</option>
                <option value='ind'>Indonesian</option>
                <option value='isl'>Icelandic</option>
                <option value='ita'>Italian</option>
                <option value='ita_old'>Italian (Old)</option>
                <option value='jpn'>Japanese</option>
                <option value='kan'>Kannada</option>
                <option value='kor'>Korean</option>
                <option value='lav'>Latvian</option>
                <option value='lit'>Lithuanian</option>
                <option value='mal'>Malayalam</option>
                <option value='mkd'>Macedonian</option>
                <option value='mlt'>Maltese</option>
                <option value='msa'>Malay</option>
                <option value='nld'>Dutch</option>
                <option value='nor'>Norwegian</option>
                <option value='pol'>Polish</option>
                <option value='por'>Portuguese</option>
                <option value='ron'>Romanian</option>
                <option value='rus'>Russian</option>
                <option value='slk'>Slovakian</option>
                <option value='slv'>Slovenian</option>
                <option value='spa'>Spanish</option>
                <option value='spa_old'>Old Spanish</option>
                <option value='sqi'>Albanian</option>
                <option value='srp'>Serbian (Latin)</option>
                <option value='swa'>Swahili</option>
                <option value='swe'>Swedish</option>
                <option value='tam'>Tamil</option>
                <option value='tel'>Telugu</option>
                <option value='tgl'>Tagalog</option>
                <option value='tha'>Thai</option>
                <option value='tur'>Turkish</option>
                <option value='ukr'>Ukrainian</option>
                <option value='vie'>Vietnamese</option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <!-- <div class="separator">
        <svg width="16" height="16" viewBox="0 0 32 32">
          <path d="M 31.340012,10.183252 27.767344,6.6105862 16.022007,18.355922 4.27667,6.6105862 0.704,10.183252 16.022007,25.501258 Z"/>
        </svg>
      </div> -->
      <div class="console" id="log"></div>
    </div>
    <!-- -->
    <script type="text/javascript" src="vendor/tesseract.min.js"></script>
		<script type="text/javascript" src="index.js"></script>
    <script src="../../js/script.js"></script>
  </body>
</html>
